@inject('appRepository', 'App\Repositories\AppRepository')
@php
    $banner =  $appRepository->getPictureByColumn(5,['首页','首页轮播']);
    $about = $appRepository->getPictureByColumn(5,['首页','关于我们']);
    $team = $appRepository->getContentByColumn(8,['首页','公证团队']);
    $range = $appRepository->getContentByColumn(3,['首页','业务范围']);
    $teachers = $appRepository->getContentByColumn(10,['首页','师资介绍']);
@endphp
@extends('layouts.app')
@section('title','首页')
@section('content')
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            @foreach($banner as $key => $item)
                <div class="carousel-item {{$key == 0 ? 'active':""}}">
                    <img class="bd-placeholder-img" width="100%" height="100%"
                         src="{{$item->content_detail->asset?$item->content_detail->asset->path:''}}"
                         preserveAspectRatio="xMidYMid slice" focusable="false" />

                </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid py-5 bg-light-gray">
        <div class="module-title">
            <h4 class="title-main">关于我们</h4>
            <div class="chart-bar"></div>
            <p class="title-primary">成功者找方法，失败者找借口</p>
            <p class="title-gary">The company uses the simulator to market test new designs.</p>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-xs-12">
                    <div class="swiper-container ">
                        <div class="swiper-wrapper ">
                            @foreach($about as $item)
                                <div class="swiper-slide">
                                    <img src="{{$item->content_detail->asset->path}}" style="width: 100%;height: 300px" alt="">
                                </div>
                            @endforeach

                        </div>
                        <!-- Add Pagination -->

                    </div>
                </div>
                <div class="col-xl-6 col-xs-12">
                    <p>占位符占位符占位符占位符占位符占位符占位符占位占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符符</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-5 bg-grey">
        <div class="module-title">
            <h4 class="title-main">公证团队</h4>
            <div class="chart-bar"></div>
            <p class="title-primary">成功者找方法，失败者找借口</p>
            <p class="title-gary">The company uses the simulator to market test new designs.</p>
        </div>
        <div class="container">
            <div class="row">
                @foreach($team as $item)
                <div class="col-xl-3 col-md-6 col-xs-12 team-item">
                    <a href="{{url('/content/'.$item->id)}}">
                    <img class="team-image"  src="{{$item->content_detail->asset->path}}" alt="">
                    </a>
                    <p class="team-title">{{$item->content_detail->title}}</p>
                    <p class="team-desc" >{{$item->content_detail->sub_title}}</p>
                </div>
                    @endforeach
            </div>
        </div>
    </div>
    <div class="container-fluid py-5 bg-light-gray">
        <div class="module-title">
            <h4 class="title-main">业务范围</h4>
            <div class="chart-bar"></div>
            <p class="title-primary">成功者找方法，失败者找借口</p>
            <p class="title-gary">The company uses the simulator to market test new designs.</p>
        </div>
        <div class="container">
            <div class="row">
                @foreach($range as $item)

                        <div class="col-xl-4 col-md-6 col-xs-12 range-item">
                            <a href="{{url('/content/'.$item->id)}}">
                            <img src="{{$item->content_detail->asset->path}}" class="img-fluid" alt="">
                            </a>
                            <p class="range-title">{{$item->content_detail->title}}</p>
                            <p class="range-desc" >{{$item->content_detail->sub_title}}</p>
                        </div>

                @endforeach
            </div>
        </div>
    </div>

    <div class="container-fluid py-5 bg-light-gray">
        <div class="module-title">
            <h4 class="title-main">联系我们</h4>
            <div class="chart-bar"></div>
            <p class="title-primary">成功者找方法，失败者找借口</p>
            <p class="title-gary">The company uses the simulator to market test new designs.</p>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-xs-12 ">
                    <h2 class="my-4">天津和信公证处</h2>
                    <p class="my-4">地址：天津市南开区东马路129号 仁恒置地国际中心1806</p>
                    <p class="my-4">邮编：300090</p>
                    <p class="my-4">电话：022-88888888</p>
                </div>
                <div class="col-xl-6 col-xs-12 ">
                    <div  id="map" style="height: 350px"></div>
                    <div id="panel"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=dcb95641a8f017ae4a84ab7160259d04&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script>
        var map = new AMap.Map("map", {
            resizeEnable: true
        });
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch();
        var infoWindow = new AMap.AdvancedInfoWindow({});
        //关键字查询
        placeSearch.search('天津市和信公证处', function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                placeSearch_CallBack(result);
            }
        });
        //回调函数
        function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
            var poiArr = data.poiList.pois;
            var location = poiArr[0].location;
            infoWindow.setContent(createContent(poiArr[0]));
            infoWindow.open(map,location);
        }
        function createContent(poi) {  //信息窗体内容
            var s = [];
            s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
            s.push("电话：" + poi.tel);
            s.push("类型：" + poi.type);
            s.push('<div>');
            return s.join("<br>");
        }
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay:true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    </script>
@endpush
